<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mini音乐播放器</title>
		<script src="https://www.yangjie.site/nav/div.js"></script>
		<style>
			/* ------------------------------------ */
			/* 网站音乐CSS */

			#cornertool {
				position: fixed;
				right: 10px;
				bottom: 70px;
				/* 	box-shadow: 0 0 10px #0000001a, 0 5px 20px #00000033; */
				border-radius: 50%;
				/* 	background: #fff; */
			}

			#cornertool ul {
				margin: 0;
				text-align: center;
				padding: 0;
			}

			#cornertool li {
				cursor: pointer
			}

			#cornertool li,
			#music span {
				transition: .2s;
			}

			#cornertool li:before {
				display: block
			}

			#cornertool li {
				position: relative;
				display: block;
				left: 0;
				width: 40px;
				height: 40px;
				line-height: 40px;
				color: #1296db;
				border-radius: 50%;
				font-size: 25px;
				text-align: center;
			}

			#music:before {
				content: "\266C";
			}

			#music:hover:before {
				content: "\25b2";
			}

			#music:hover:before {
				transform: rotate(90deg);
			}

			#music.play:hover:before {
				content: "\3013";
				animation: 0;
			}

			.play:before {
				animation: play 5s linear infinite;
			}

			@keyframes play {
				0% {
					transform: rotate(0deg)
				}

				100% {
					transform: rotate(360deg)
				}
			}

			#music span {
				position: absolute;
				display: block;
				bottom: 0;
				height: 5px;
				width: 0;
				background: #666;
				opacity: .7
			}

			#music.play span {
				width: 100%
			}

			#music.play span i {
				display: block;
				height: 100%;
				width: 0;
				background: #1296db;
			}

			/* 音乐代码结束*/
		</style>
	</head>
	<body>
		<!-- 音乐代码 -->
		<div id="cornertool">
			<ul>
				<li id="music"> <span><i></i></span> <audio id="audio" preload="none" autoplay=""></audio> </li>
			</ul>
		</div>
	</body>
	<script>
		// 音乐配置代码
		(function() {
			var a = document.getElementById("audio");
			var b = document.getElementById("music");
			var c = [
				"https://music.163.com/song/media/outer/url?id=563534789.mp3",
				"https://music.163.com/song/media/outer/url?id=477841196.mp3",
				"https://music.163.com/song/media/outer/url?id=32717172.mp3"
			];
			var d = 0.15;
			if (d >= 0 && d <= 1) {
				a.volume = d
			}
			a.src = c.shift();
			a.autoplay = 1;
			a.addEventListener('play', g);
			a.addEventListener('pause', h);
			a.addEventListener('ended', f);
			a.addEventListener('error', f);
			a.addEventListener('canplay', j);

			function f() {
				if (!c.length) {
					a.removeEventListener('play', g);
					a.removeEventListener('pause', h);
					a.removeEventListener('ended', f);
					a.removeEventListener('error', f);
					a.removeEventListener('canplay', j);
					b.style.display = "none";
					alert("哦，仙人板板，本站的背景音乐好像出问题了，希望您可以通过留言等方式通知管理员，谢谢您的帮助。")
				} else {
					a.src = c.shift();
					a.play()
				}
			}

			function g() {
				b.setAttribute("class", "play");
				a.addEventListener('timeupdate', k)
			}

			function h() {
				b.removeAttribute("class");
				a.removeEventListener('timeupdate', k)
			}

			function j() {
				c.push(a.src)
			}

			function k() {
				b.getElementsByTagName("i")[0].style.width = (a.currentTime / a.duration * 100).toFixed(1) + "%"
			}
			b.onclick = function() {
				if (a.canPlayType('audio/mpeg') != "" || a.canPlayType('audio/ogg;codes="vorbis"') != "" || a
					.canPlayType('audio/mp4;codes="mp4a.40.5"') != "") {
					if (a.paused) {
						if (a.error) {
							f()
						} else {
							a.play()
						}
					} else {
						a.pause()
					}
				} else {
					alert("仙人板板，哦、对不起，您的浏览器不支持HTML5音频播放，请升级您的浏览器。")
				}
			};
			b.removeAttribute("class")
		})();
	</script>
</html>
